<template>
  <div id="set-left-join">
    <el-form inline label-width="100px">
      <el-form-item label="字段名:">
        <el-input readonly v-model="baseSetContent.columnName"></el-input>
      </el-form-item>
      <el-form-item label="字段注释:">
        <el-input readonly v-model="baseSetContent.desc"></el-input>
      </el-form-item>
    </el-form>
    <el-form inline label-width="100px;">
      <el-form-item label="选择关联表" style="width: 320px;">
        <el-select v-model="tableName" placeholder="请选择数据库表名" clearable >
          <el-option v-for="(item,index) of tables" :key="index" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="表别名"style="width: 320px;">
        <el-input v-model="table.tableAliasName"></el-input>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="submit" size="small" style="margin-bottom: 10px">确定</el-button>
    <el-table :data="table.tableColumns" border style="width: 100%" @selection-change="select">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column prop="columnName" label="字段名">
      </el-table-column>
      <el-table-column label="别名">
        <template slot-scope="scope">
          <el-input v-model="scope.row.propertyName"></el-input>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: "set-left-join",
    components: {},
    data() {
      return {
        tableName:'',
        tables:[],
        table:{},
        leftJoinColumn:[],
        leftJoinTable:{
          leftTable:'',
          tableAliaName:'',
          fkName:'',
          viewProperties:[]
        }
      }
    },
    watch: {
      'tableName':function () {
        if (this.common.isNotEmpty(this.tableName)){
          this.getColumns()
        } else{
          this.table = {}
        }
      }
    },
    methods: {
      submit(){
        this.leftJoinTable.fkName = this.baseSetContent.columnName
        this.leftJoinTable.leftTable = this.tableName
        this.leftJoinTable.tableAliaName = this.table.tableAliasName
        let viewProperties = []
        for (let i = 0; i < this.leftJoinColumn.length; i++) {
          let item = this.leftJoinColumn[i]
          let property = {}
          property.column = item.columnName
          property.jdbcType=item.jdbcType
          property.columnAlia=item.propertyName
          viewProperties.push(property)
        }
        this.leftJoinTable.viewProperties = viewProperties
        this.$emit('choseLeftJoin',this.leftJoinTable)
      },
      select(val){
        this.leftJoinColumn = val
      },
      getColumns(){
        this.common.request({
          url:this.buttons.children[0].target,
          param:{
            tableName: this.tableName
          },
          permission:this.buttons.children[0].id,
          success:res=>{
            if (res.code == 1){
              this.table = res.data.rows[0]
            }
          }
        })
      },
      getTables(){
        this.common.request({
          url:this.buttons.target,
          permission:this.buttons.id,
          success:res=>{
            if (res.code == 1){
              this.tables = res.data.rows
            }
          }
        })
      }
    },
    mounted() {
      this.getTables()
    },
    props:{
      baseSetContent:Object,
      buttons:Object
    }
  }
</script>

<style scoped>

</style>
